<template>
  <div id="app">
    <router-view/>
    <van-tabbar v-model="active" route v-if="$route.meta.isTab">
      <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/menu" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item to="/car" icon="cart-o"  v-if="haslogin" :badge="num">购物车</van-tabbar-item>
      <van-tabbar-item to="/car" icon="cart-o" v-else>购物车</van-tabbar-item>
      <van-tabbar-item to="/user" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import  { mapState,mapGetters } from "vuex"
export default {
  data(){
    return{
      active:0
    }
  },
  computed:{
    ...mapState(['haslogin']),
    ...mapGetters({
      num:"cart/carNum"
    })
  }
}
</script>
<style lang="less">
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
#app{
  height: 100vh;
  background-color: #fafafa;
}
.van-nav-bar{
  box-shadow: 0 0 5px 0 rgba(0,0,0,.1);
}
.card{
  background-color: #fff!important;
  margin-bottom:10px!important;
}
.pb50{
  padding-bottom:50px!important;
}
</style>
